<template>
  <nav class="bottom-nav">
    <div class="nav-item" :class="{ active: activeTab === 'home' }" @click="goToHome">
      <div class="nav-icon">🏠</div>
      <span class="nav-label">首页</span>
    </div>
    
    <div class="nav-item" @click="goToShopping">
      <div class="nav-icon">🛒</div>
      <span class="nav-label">购物</span>
    </div>
    
    <div class="nav-item publish-btn" @click="handlePublish">
      <div class="publish-icon">+</div>
      <span class="nav-label">发布</span>
    </div>
    
    <div class="nav-item" @click="goToDesignPatterns">
      <div class="nav-icon">🎨</div>
      <span class="nav-label">设计模式</span>
    </div>
    
    <div class="nav-item" :class="{ active: activeTab === 'profile' }" @click="goToProfile">
      <div class="nav-icon">👤</div>
      <span class="nav-label">我的</span>
    </div>
  </nav>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeTab = ref('home')

// 监听路由变化以更新激活状态
watch(() => route.path, (newPath) => {
  if (newPath === '/profile') {
    activeTab.value = 'profile'
  } else if (newPath === '/home' || newPath === '/') {
    activeTab.value = 'home'
  }
}, { immediate: true })

const goToHome = () => {
  activeTab.value = 'home'
  router.push('/home')
}

const goToShopping = () => {
  // 购物页面（待实现）
  console.log('跳转到购物页面')
}

const handlePublish = () => {
  // 发布功能（待实现）
  console.log('打开发布页面')
}

const goToDesignPatterns = () => {
  router.push('/design-patterns')
}

const goToProfile = () => {
  activeTab.value = 'profile'
  router.push('/profile')
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.2s;
}

.nav-item.active .nav-label {
  color: #ff2442;
}

.nav-item.active .nav-icon {
  color: #ff2442;
}

.nav-icon {
  font-size: 22px;
  color: #666;
  margin-bottom: 4px;
  position: relative;
  transition: color 0.2s;
}

.nav-label {
  font-size: 11px;
  color: #666;
  transition: color 0.2s;
}

.badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #ff2442;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.publish-btn {
  position: relative;
}

.publish-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
  transition: transform 0.2s;
}

.publish-btn:active .publish-icon {
  transform: scale(0.95);
}

.publish-btn .nav-label {
  color: #1677ff;
  font-weight: 500;
}

/* 响应式 */
@media (max-width: 480px) {
  .bottom-nav {
    height: 56px;
  }

  .nav-icon {
    font-size: 20px;
  }

  .nav-label {
    font-size: 10px;
  }

  .publish-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
</style>

